<template>
	<view class="panel-category flex--row">
		<view class="category-item" :class="{'active':activeIndex == 1}"	 @click.stop="$emit('changeActiveIndex',1)">
			<slot name="category-1"></slot>
		</view>
		<view class="category-item"  :class="{'active':activeIndex == 2}"  @click.stop="$emit('changeActiveIndex',2)">
			<slot name="category-2"></slot>
		</view>
	</view>	
</template>

<script>
	export default{
		props:['activeIndex'],
		emits:['changeActiveIndex']
	}
</script>

<style lang="scss">
	$main-color:rgba(232, 89, 12, 1);
	.panel-category{
		@include border-four-roundings;
		
		gap:24px;
		justify-content: center;
		
		padding:6px;
		margin-top:auto;
		background-color:#fff;
	}
	
	.category-item{
		border-radius: 4px;
		padding:2px 12px;
		
		font-size: 16px;
		font-weight: 600;
		color:#555;
		&.active{
			background-color: $main-color;
			color:#fff;
		}
	}
</style>